import React from 'react';
import { Dialog, Button } from '@teamix/ui';
import { getIntroPointState, setIntroPointState } from 'api';
import track from 'utils/track';
import { navigate } from 'utils/router';
import './index.scss';
import intl from '../../../../../../../../locale';

const prefix = 'sensitive-behavior-intro-dialog';

export default class SensitiveBehaviorTooltipDialog extends React.Component {
  state = {
    visible: false,
  };

  UNSAFE_componentWillMount() {
    this.getIfDialogShow();
  }

  getIfDialogShow = () => {
    getIntroPointState('sensitive_behavior_guiding_pop')
      .then((result) => {
        if (result.state) {
          this.setState({
            visible: result.state,
          });
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  setIfDialogShow = () => {
    setIntroPointState('sensitive_behavior_guiding_pop')
      .then(() => {
        this.setState({
          visible: false,
        });
      })
      .catch((err) => {
        console.error(err);
      });
  };

  onClose = () => {
    track({
      action: 'close_dialog',
      page: 'Dialog-Sensitive Behavior Monitoring',
    });

    this.setState({
      visible: false,
    });

    this.setIfDialogShow();
  };

  render() {
    const { visible } = this.state;
    return (
      <div>
        <Dialog
          title={intl.get({
            id: 'code-assets.containers.sensitiveDialog.EnableNewFeatures',
            defaultMessage: '开启新功能',
          })}
          showHeadDivider={false}
          visible={visible}
          onClose={this.onClose}
          footer={false}
          footerActions={[]}
        >
          <div className={`${prefix}-card`}>
            <div className={`${prefix}-header`}>
              <img
                className={`${prefix}-image`}
                src="https://img.alicdn.com/tfs/TB1MsbeqQY2gK0jSZFgXXc5OFXa-848-686.png"
              />
            </div>
            <div className={`${prefix}-title`}>
              {intl.get({
                id: 'code-assets.containers.sensitiveDialog.ItIsOurMissionTo',
                defaultMessage: '保护企业代码资产，是我们的使命',
              })}
            </div>
            <div className={`${prefix}-desc`}>
              {intl.get({
                id: 'code-assets.containers.sensitiveDialog.CodeupNewOnline',
                defaultMessage: 'Codeup 新上线',
              })}
              <span className={`${prefix}-desc-subject`}>
                {intl.get({
                  id: 'code-assets.containers.sensitiveDialog.SensitiveBehaviorMonitoring',
                  defaultMessage: '「敏感行为监测」',
                })}
              </span>
              {intl.get({
                id: 'code-assets.containers.sensitiveDialog.IntelligentServiceCanQuicklyIdentify',
                defaultMessage: '智能服务，开启后可快速识别成员的异常行为，保障企业数据安全。',
              })}
            </div>
            <div className={`${prefix}-oper`}>
              <Button
                className={`${prefix}-oper-btn`}
                type="primary"
                size="medium"
                onClick={() => {
                  this.setIfDialogShow();
                  track({
                    action: 'enter_organization_settings',
                    page: 'Dialog-Sensitive Behavior Monitoring',
                  });
                  navigate('/settings/member_behavior_security');
                }}
              >
                {intl.get({
                  id: 'code-assets.containers.sensitiveDialog.GoToSettings',
                  defaultMessage: '前往设置',
                })}
              </Button>
            </div>
          </div>
        </Dialog>
      </div>
    );
  }
}
